<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        background: red;
        color: gold;
      }
      .text-danger {
        width: 100px;
        height: 45px;
        border-radius: 10px;
        background: lightcoral;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>车系总价：{{getCount}}</h2>
      <ul v-for="(item, i) in list">
        <li @click="handleAddItem(item, i)">{{item.name}}: {{item.count}}</li>
      </ul>

      <h1>判断手机号是否合法，然后登陆</h1>
      <input type="text" v-model="inputValue" />
      <button @click="handleSubmit">登陆</button>
    </div>

    <script src="../utils/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>
      console.log(isMobile('1272631042523'))
      // vue2 构造函数 数据驱动dom
      const vm = new Vue({
        el: '#app',
        // data写成函数形式，可以防止变量污染
        data() {
          return {
            list: [
              {
                id: 1,
                count: 20,
                name: '丰田凯美瑞',
              },
              {
                id: 2,
                count: 22,
                name: '本田雅阁',
              },
              {
                id: 3,
                count: 25,
                name: '大众迈腾',
              },
            ],
            inputValue: '',
          }
        },
        // 计算属性 是基于它们的响应式依赖进行缓存的
        // 计算属性，可以防止一些计算逻辑，具有缓存的功能，可以优化项目性能，也是放置函数的，这个函数往往是用来处理数据的
        computed: {
          // 会基于缓存结果，直接拿值，比定义在methods中的方法要更有效率
          getCount() {
            // 凡是定义在data中的，都是响应式数据
            return this.list.reduce((num, item) => {
              return num + item.count
            }, 0)
          },
          // 手机号的校验
          isMobile() {
            return isMobile(this.inputValue)
          },
        },
        created() {},
        // 监听属性，可以监听值的改变以及异步数据，说白了，可以处理异步
        watch: {
          inputValue(newVal, oldVal) {
            console.log('newVal: ', newVal, 'oldVal:', oldVal)
          },
        },
        // 计算三辆车的总价
        methods: {
          // getCount() {
          //   return this.list.reduce((num, item) => {
          //     return num + item.count
          //   }, 0)
          // },
          // 登陆按钮事件 防抖处理，优化代码执行效率，减少重复代码提交
          handleSubmit: debounce(function () {
            console.log(this)
            if (this.isMobile) {
              console.log('登陆成功')
              // alert('登陆成功')
            } else {
              console.log('校验失败')
              // alert('校验失败')
            }
          }, 500),
          /*
          不带防抖的提交
          */
          // handleSubmit() {
          //   console.log(this.isMobile)
          //   if (this.isMobile) {
          //     console.log('登陆成功')
          //     // alert('登陆成功')
          //   } else {
          //     console.log('校验失败')
          //     // alert('校验失败')
          //   }
          // },
          handleAddItem(item) {
            console.log(item, 'item')
            item.count += 2
          },
        },
      })

      // 模拟一个异步接口
      function createData() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
              code: 0,
              msg: 'success',
              data: ['正在上映', '即将上映'],
            })
          }, 1000)
        })
      }
    </script>
  </body>
</html>
